<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      layout:decorate="~{layout/default}">
<head>
    <title>订单详情 - 废物回收管理系统</title>
    <style>
        .order-detail-container {
            background: #f8f9fa;
            min-height: 100vh;
            padding: 2rem;
        }
        .page-header {
            background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
            padding: 2rem;
            border-radius: 1rem;
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
            color: white;
        }
        .page-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="0" cy="0" r="20" fill="rgba(255,255,255,0.05)"/></svg>') 0 0/50px 50px;
            opacity: 0.1;
        }
        .back-link {
            color: white;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transition: transform 0.2s;
        }
        .back-link:hover {
            transform: translateX(-5px);
            color: rgba(255,255,255,0.9);
        }
        .order-number {
            font-size: 1.5rem;
            font-weight: 600;
            margin: 1rem 0;
        }
        .status-badge {
            padding: 0.5rem 1.5rem;
            border-radius: 2rem;
            font-weight: 500;
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .card {
            background: white;
            border: none;
            border-radius: 1rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            margin-bottom: 2rem;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.08);
        }
        .card-header {
            background: transparent;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            padding: 1.5rem;
        }
        .card-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #2c3e50;
            margin: 0;
            display: flex;
            align-items: center;
        }
        .card-title i {
            margin-right: 0.75rem;
            color: #6B73FF;
        }
        .card-body {
            padding: 1.5rem;
        }
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }
        .info-item {
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 0.75rem;
            transition: background-color 0.2s;
        }
        .info-item:hover {
            background: #f0f2f5;
        }
        .info-label {
            color: #6c757d;
            font-size: 0.875rem;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
        }
        .info-label i {
            margin-right: 0.5rem;
            color: #6B73FF;
        }
        .info-value {
            color: #2c3e50;
            font-size: 1rem;
            font-weight: 500;
        }
        .timeline {
            position: relative;
            padding: 1.5rem 0;
        }
        .timeline::before {
            content: '';
            position: absolute;
            left: 1rem;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #e9ecef;
        }
        .timeline-item {
            position: relative;
            padding-left: 3rem;
            padding-bottom: 2rem;
        }
        .timeline-badge {
            position: absolute;
            left: 0;
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            background: white;
            border: 2px solid #6B73FF;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }
        .timeline-badge.active {
            background: #6B73FF;
            color: white;
        }
        .timeline-content {
            background: white;
            padding: 1.5rem;
            border-radius: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .timeline-title {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 0.5rem;
        }
        .timeline-date {
            color: #6c757d;
            font-size: 0.875rem;
        }
        .action-buttons {
            display: grid;
            gap: 1rem;
        }
        .btn {
            padding: 1rem 1.5rem;
            border-radius: 0.75rem;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .btn i {
            margin-right: 0.75rem;
            font-size: 1.1rem;
        }
        .btn-primary {
            background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
            border: none;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .btn-success {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            border: none;
        }
        .btn-danger {
            background: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%);
            border: none;
        }
        .modal-content {
            border: none;
            border-radius: 1rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        .modal-header {
            background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
            color: white;
            border: none;
            border-radius: 1rem 1rem 0 0;
            padding: 1.5rem;
        }
        .modal-body {
            padding: 2rem;
        }
        .modal-footer {
            border-top: 1px solid rgba(0,0,0,0.05);
            padding: 1.5rem;
        }
        .form-label {
            color: #2c3e50;
            font-weight: 500;
            margin-bottom: 0.75rem;
        }
        .form-control {
            border: 1px solid rgba(0,0,0,0.1);
            border-radius: 0.75rem;
            padding: 0.75rem 1rem;
            transition: all 0.2s;
        }
        .form-control:focus {
            border-color: #6B73FF;
            box-shadow: 0 0 0 3px rgba(107,115,255,0.1);
        }
        .rating {
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-end;
            gap: 0.5rem;
        }
        .rating input {
            display: none;
        }
        .rating label {
            cursor: pointer;
            font-size: 2rem;
            color: #ddd;
            transition: color 0.2s;
        }
        .rating label:hover,
        .rating label:hover ~ label,
        .rating input:checked ~ label {
            color: #ffc107;
        }
        .rating-stars {
            color: #ffc107;
            font-size: 1.25rem;
        }
        @media (max-width: 768px) {
            .order-detail-container {
                padding: 1rem;
            }
            .info-grid {
                grid-template-columns: 1fr;
            }
            .timeline-item {
                padding-left: 2.5rem;
            }
        }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <div class="order-detail-container">
            <!-- 页面头部 -->
            <div class="page-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <a href="/orders/list" class="back-link">
                            <i class="fas fa-arrow-left me-2"></i>
                            <span>返回列表</span>
                        </a>
                        <div class="order-number" th:text="${'订单 #' + order.orderNumber}"></div>
                    </div>
                    <span class="status-badge" th:classappend="${
                        order.status == 'PENDING' ? 'bg-warning' :
                        order.status == 'ACCEPTED' ? 'bg-info' :
                        order.status == 'PROCESSING' ? 'bg-primary' :
                        order.status == 'COMPLETED' ? 'bg-success' : 'bg-danger'
                    }" th:text="${
                        order.status == 'PENDING' ? '待接单' :
                        order.status == 'ACCEPTED' ? '已接单' :
                        order.status == 'PROCESSING' ? '处理中' :
                        order.status == 'COMPLETED' ? '已完成' : '已取消'
                    }"></span>
                </div>
            </div>

            <div class="row">
                <!-- 左侧内容区 -->
                <div class="col-lg-8">
                    <!-- 订单信息卡片 -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-info-circle"></i>
                                订单信息
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="info-grid">
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-calendar"></i>
                                        预约时间
                                    </div>
                                    <div class="info-value" th:text="${order.appointmentTime != null ? order.appointmentTime : '-'}"></div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-clock"></i>
                                        创建时间
                                    </div>
                                    <div class="info-value" th:text="${#temporals.format(order.createTime, 'yyyy-MM-dd HH:mm')}"></div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-phone"></i>
                                        联系电话
                                    </div>
                                    <div class="info-value" th:text="${order.contactPhone}"></div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-map-marker-alt"></i>
                                        回收地址
                                    </div>
                                    <div class="info-value" th:text="${order.address}"></div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-recycle"></i>
                                        物品类型
                                    </div>
                                    <div class="info-value" th:text="${order.wasteType}"></div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-weight"></i>
                                        预估重量
                                    </div>
                                    <div class="info-value" th:text="${order.estimatedWeight + ' kg'}"></div>
                                </div>
                                <div class="info-item" th:if="${order.actualWeight != null}">
                                    <div class="info-label">
                                        <i class="fas fa-balance-scale"></i>
                                        实际重量
                                    </div>
                                    <div class="info-value" th:text="${order.actualWeight + ' kg'}"></div>
                                </div>
                                <div class="info-item" th:if="${order.price != null}">
                                    <div class="info-label">
                                        <i class="fas fa-yen-sign"></i>
                                        回收价格
                                    </div>
                                    <div class="info-value" th:text="${order.price + ' 元'}"></div>
                                </div>
                            </div>
                            <div class="mt-4">
                                <div class="info-label">
                                    <i class="fas fa-file-alt"></i>
                                    物品描述
                                </div>
                                <div class="info-value" th:text="${order.description}"></div>
                            </div>
                        </div>
                    </div>

                    <!-- 订单状态时间线 -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-history"></i>
                                订单状态
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="timeline">
                                <div class="timeline-item">
                                    <div class="timeline-badge active">
                                        <i class="fas fa-plus"></i>
                                    </div>
                                    <div class="timeline-content">
                                        <div class="timeline-title">订单创建</div>
                                        <div class="timeline-date" th:text="${#temporals.format(order.createTime, 'yyyy-MM-dd HH:mm')}"></div>
                                    </div>
                                </div>
                                <div class="timeline-item" th:if="${order.status != 'CANCELLED'}">
                                    <div class="timeline-badge" th:classappend="${order.status != 'PENDING' ? 'active' : ''}">
                                        <i class="fas fa-check"></i>
                                    </div>
                                    <div class="timeline-content">
                                        <div class="timeline-title">订单接受</div>
                                        <div class="timeline-date" th:text="${order.status != 'PENDING' ? #temporals.format(order.updateTime, 'yyyy-MM-dd HH:mm') : '等待接单'}"></div>
                                    </div>
                                </div>
                                <div class="timeline-item" th:if="${order.status == 'PROCESSING' || order.status == 'COMPLETED'}">
                                    <div class="timeline-badge active">
                                        <i class="fas fa-truck"></i>
                                    </div>
                                    <div class="timeline-content">
                                        <div class="timeline-title">开始处理</div>
                                        <div class="timeline-date" th:text="${#temporals.format(order.updateTime, 'yyyy-MM-dd HH:mm')}"></div>
                                    </div>
                                </div>
                                <div class="timeline-item" th:if="${order.status == 'COMPLETED'}">
                                    <div class="timeline-badge active">
                                        <i class="fas fa-flag-checkered"></i>
                                    </div>
                                    <div class="timeline-content">
                                        <div class="timeline-title">订单完成</div>
                                        <div class="timeline-date" th:text="${#temporals.format(order.completeTime, 'yyyy-MM-dd HH:mm')}"></div>
                                    </div>
                                </div>
                                <div class="timeline-item" th:if="${order.status == 'CANCELLED'}">
                                    <div class="timeline-badge active">
                                        <i class="fas fa-times"></i>
                                    </div>
                                    <div class="timeline-content">
                                        <div class="timeline-title">订单取消</div>
                                        <div class="timeline-date" th:text="${#temporals.format(order.updateTime, 'yyyy-MM-dd HH:mm')}"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧操作区 -->
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-tasks"></i>
                                订单操作
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="action-buttons">
                                <button th:if="${order.status == 'PENDING'}"
                                        class="btn btn-primary"
                                        onclick="acceptOrder()">
                                    <i class="fas fa-check"></i>
                                    接受订单
                                </button>
                                <button th:if="${order.status == 'ACCEPTED'}"
                                        class="btn btn-primary"
                                        onclick="startProcessing()">
                                    <i class="fas fa-play"></i>
                                    开始处理
                                </button>
                                <button th:if="${order.status == 'PROCESSING'}"
                                        class="btn btn-success"
                                        onclick="showCompleteModal()">
                                    <i class="fas fa-check-circle"></i>
                                    完成订单
                                </button>
                                <button th:if="${order.status == 'PENDING' || order.status == 'ACCEPTED'}"
                                        class="btn btn-danger"
                                        onclick="showCancelModal()">
                                    <i class="fas fa-times"></i>
                                    取消订单
                                </button>
                                <button th:if="${order.status == 'COMPLETED' && order.rating == null}"
                                        class="btn btn-primary"
                                        onclick="showRatingModal()">
                                    <i class="fas fa-star"></i>
                                    评价订单
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 评价信息卡片 -->
                    <div class="card" th:if="${order.status == 'COMPLETED' && order.rating != null}">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-star"></i>
                                评价信息
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="info-item">
                                <div class="info-label">评分</div>
                                <div class="rating-stars">
                                    <i class="fas fa-star" th:each="i : ${#numbers.sequence(1, order.rating)}"></i>
                                </div>
                            </div>
                            <div class="info-item mt-3">
                                <div class="info-label">评价内容</div>
                                <div class="info-value" th:text="${order.comment}"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 完成订单模态框 -->
    <div class="modal fade" id="completeModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">完成订单</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="completeForm">
                        <div class="mb-3">
                            <label class="form-label">实际重量（kg）</label>
                            <input type="number" class="form-control" id="actualWeight" required
                                   min="0" step="0.1">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">回收价格（元）</label>
                            <input type="number" class="form-control" id="price" required
                                   min="0" step="0.1">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" onclick="completeOrder()">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 取消订单模态框 -->
    <div class="modal fade" id="cancelModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">取消订单</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="cancelForm">
                        <div class="mb-3">
                            <label class="form-label">取消原因</label>
                            <textarea class="form-control" id="cancelReason" rows="3" required></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" onclick="cancelOrder()">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 评价订单模态框 -->
    <div class="modal fade" id="ratingModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">评价订单</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="ratingForm">
                        <div class="mb-3">
                            <label class="form-label">评分</label>
                            <div class="rating">
                                <input type="radio" name="rating" value="5" id="rating5"><label for="rating5">★</label>
                                <input type="radio" name="rating" value="4" id="rating4"><label for="rating4">★</label>
                                <input type="radio" name="rating" value="3" id="rating3"><label for="rating3">★</label>
                                <input type="radio" name="rating" value="2" id="rating2"><label for="rating2">★</label>
                                <input type="radio" name="rating" value="1" id="rating1"><label for="rating1">★</label>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">评价内容</label>
                            <textarea class="form-control" id="comment" rows="3" required></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="submitRating()">提交评价</button>
                </div>
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script th:inline="javascript">
            const orderId = /*[[${order.id}]]*/ null;
            
            function acceptOrder() {
                fetch(`/orders/${orderId}/accept`, {
                    method: 'POST'
                }).then(response => {
                    if (!response.ok) throw new Error('接单失败');
                    location.reload();
                }).catch(error => alert(error.message));
            }
            
            function startProcessing() {
                fetch(`/orders/${orderId}/process`, {
                    method: 'POST'
                }).then(response => {
                    if (!response.ok) throw new Error('开始处理失败');
                    location.reload();
                }).catch(error => alert(error.message));
            }
            
            function showCompleteModal() {
                new bootstrap.Modal(document.getElementById('completeModal')).show();
            }
            
            function completeOrder() {
                const actualWeight = document.getElementById('actualWeight').value;
                const price = document.getElementById('price').value;
                
                if (!actualWeight || !price) {
                    alert('请填写完整信息');
                    return;
                }
                
                fetch(`/orders/${orderId}/complete`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: `actualWeight=${actualWeight}&price=${price}`
                }).then(response => {
                    if (!response.ok) throw new Error('完成订单失败');
                    location.reload();
                }).catch(error => alert(error.message));
            }
            
            function showCancelModal() {
                new bootstrap.Modal(document.getElementById('cancelModal')).show();
            }
            
            function cancelOrder() {
                const reason = document.getElementById('cancelReason').value;
                
                if (!reason) {
                    alert('请输入取消原因');
                    return;
                }
                
                fetch(`/orders/${orderId}/cancel`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: `reason=${encodeURIComponent(reason)}`
                }).then(response => {
                    if (!response.ok) throw new Error('取消订单失败');
                    location.reload();
                }).catch(error => alert(error.message));
            }
            
            function showRatingModal() {
                new bootstrap.Modal(document.getElementById('ratingModal')).show();
            }
            
            function submitRating() {
                const rating = document.querySelector('input[name="rating"]:checked')?.value;
                const comment = document.getElementById('comment').value;
                
                if (!rating || !comment) {
                    alert('请填写完整评价信息');
                    return;
                }
                
                fetch(`/orders/${orderId}/rate`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: `rating=${rating}&comment=${encodeURIComponent(comment)}`
                }).then(response => {
                    if (!response.ok) throw new Error('评价失败');
                    location.reload();
                }).catch(error => alert(error.message));
            }
        </script>
    </th:block>
</body>
</html> 